<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial Demo - Tutorial9</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="robots" content="none" />

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.otherbutton,.homebutton,.downloadbutton,.donatebutton').append('<span class="hover"></span>').each(function () {
	  		var $span = $('> span.hover', this).css('opacity', 0);
	  		$(this).hover(function () {
	    		$span.stop().fadeTo(500, 1);
	 		}, function () {
	   	$span.stop().fadeTo(500, 0);
	  		});
		});
	});
</script>

</head>
<body>
<div id="content">
	<h1>Tutorial button <small>| xhtml + css</small></h1>
		<p><a href="download.zip" class="button"></a></p>
		<br/><br/>
		<h1>Tutorial button with jQuery effect <small>| xhtml + css + javascript</small></h1>
			<p><a href="#" class="otherbutton"></a></p>
		<br/><br/>
		<h1>Going pro <small>| become a xhtml + css expert</small></h1>			
		<p>
			<a href="http://www.tutorial9.net" class="homebutton"></a>
			<a href="download.zip" class="downloadbutton"></a>
		</p><div class="clearer"/><br/>
		<p>Learn more about css sprites to make multiple buttons in one image. It's not that difficult once you understand how to position the image.</p><br/><br/>
		
		
		<div id="column1"><a href="#" class="donatebutton"></a></div>
		<div id="column2"><a href="#" class="donatebutton_alt"></a></div>
		<div class="clearer"/><br/>
		<p>As you can see jQuery is not always the right choice. The badges have a different text on hover, but this is not that nice with jQuery (left badge). So keep in mind that more effects is not always the best choice. Besides that, this example is to show you that you can apply this effect on many things. So think out of the box.</p><br/>
</div>
</body>
</html>